<template>
	<view class="productList">
		<view style="z-index: 99;">
			<view style="width: 100%; background-color: #e93323;" :style="{ height: `${systemInfo.statusBarHeight}px` }"></view>
			<view class="search-item bg-color acea-row">
				<view class="back" @click="set_where(1)"><view class="iconfont iconxianxingxiangzuo"></view></view>
				<view class="input">
					<text class="iconfont icon-sousuo"></text>
					<input class="search" :placeholder="i18n.Search" placeholder-class='placeholder' confirm-type='search' name="search" :value='where.keyword'
					 @input="searchSubmit"></input>
				</view>
				<view style="text-align: right;" class="iconfont" :class="is_switch == true ? 'iconyduipaibanleixingduicheng' : 'iconpaiban'" @click="Changswitch"></view>
			</view>
			<view class="nav-wrapper">
				<view class="nav acea-row row-middle">
					<view class="item" @click="downStatus = !downStatus" :class="{ 'font-color': downKey > 0 && firstKey == 0 }">
						{{ downMenu[downKey].title }}
						<text v-if="!downStatus" class="iconfont iconxianxingxiangshang spin"></text>
						<text v-else class="iconfont iconxianxingxiangxia spin"></text>
					</view>
					<view class="item" :class="{ 'font-color': firstKey == 3 }" @click="set_where(3)">{{i18n.Sales}}</view>
					<view class="item" :class="{ 'font-color': firstKey == 2 }" @click="set_where(2)">
						{{i18n.Price}}
						<image v-if="price == 1" src="@/static/images/up.png"></image>
						<image v-else-if="price == 2" src="@/static/images/down.png"></image>
						<image v-else src="@/static/images/horn.png"></image>
					</view>
					<!-- down -->
					<view class="item" :class="{ 'font-color': firstKey == 4 }" @click="bindRight">
						{{i18n.Filter}}
						<text class="iconfont iconshaixuan"></text>
					</view>
				</view>
			</view>
			<view class="down-wrapper" v-if="downStatus">
				<view class="bg"></view>
				<view class="down-box">
					<view class="down-item" v-for="(item, index) in downMenu" :key="item.key" :class="{ on: index == downKey }" @click="bindDown(item, index)">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="min" :class="is_switch == true ? '' : 'on'" @scrolltolower="loadmore()">
			<view class="list">
				<view class="item" :class="is_switch == true ? '' : 'on'" hover-class="none" v-for="(item, index) in productList" :key="index" @click="godDetail(item.product_id)">
					<view class="pictrue" :class="is_switch == true ? '' : 'on'">
						<image :src="item.image" :class="is_switch == true ? '' : 'on'"></image>
					</view>
					<view class="text" :class="is_switch == true ? '' : 'on'">
						<view class="name line1">{{ item.store_name }}</view>
						<view class="money font-color" :class="is_switch == true ? '' : 'on'">
							￥
							<text class="num">{{ item.price }}</text>
							<view class="ticket" v-if="item.issetCoupon">{{ i18n.Get }}</view>
						</view>
						<view class="score">{{ item.rate }}{{i18n.Score}} {{ item.reply_count }}{{i18n.Comments}}</view>
						<view class="company" v-if="item.merchant" @click.stop="goShop(item)">
							{{ item.merchant.mer_name }}
							<view class="flex">
								{{i18n.Shop}}
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
					<!-- 返佣 -->
					<block v-if="item.max_extension">
						<view class="foot-bar" :class="is_switch == true ? '' : 'on'">
							<text class="iconfont icon-fenxiang" v-if="is_switch == true"></text>
							{{ i18n.Earn }} ¥{{ item.max_extension }}
						</view>
					</block>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="productList.length > 0">{{ loadTitle }}</view>
		</scroll-view>
		<rightSlider v-if="rightBox" :status="rightBox" :brandList="brandList" @confirm="confirm" @close="close"></rightSlider>
		
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { getBrandlist, merchantProduct } from '@/api/store.js';
import rightSlider from '@/components/rightSlider.vue';
export default {
	components: {
		rightSlider
	},
	data() {
		return {
			systemInfo: uni.getSystemInfoSync(),
			// 筛选框
			rightBox: false,
			//品牌列表
			brandList: [],
			loadTitle: globalData.$t('list').LoadMore,
			is_switch: true,
			mer_id: globalData.mer_id,
			productList: [],
			downKey: 0,
			downStatus: false,
			// 是否第一个
			firstKey: 0,
			// 下拉菜单
			downMenu: [
				{
					title: globalData.$t('list').Composite,
					key: 1
				},
				{
					title: globalData.$t('list').Score,
					key: 2
				},
				{
					title: globalData.$t('list').New,
					key: 3
				}
			],
			where: {
				mer_cate_id: '',
				order: '',
				price_on: '',
				price_off: '',
				brand_id: '',
				keyword: '',
				page: 1,
				limit: 6
			}
		};
	},
	computed: {
		i18n() {
			return globalData.$t('list');
		},
	},
	onLoad: function(options) {
		this.$set(this.where, 'mer_cate_id', options.id || '');
		this.$set(this, 'mer_id', options.mer_id || '');
		this.title = options.title || '';
		this.$set(this.where, 'keyword', options.searchValue || '');
		this.get_product_list();
	},
	methods: {
		searchSubmit: function(e) {
			let that = this;
			that.$set(that.where, 'keyword', e.detail.value);
				that.loadend = false;
				that.$set(that.where, 'page', 1)
				this.get_product_list(true);
		},
		// 去商品详情页
		godDetail(id) {
			uni.redirectTo({
				url: `/pages/goods_details/index?id=${id}&mer_id=${this.mer_id}`
			});
		},
		// 组件关闭
		close() {
			this.rightBox = false;
		},
		// 组件确定
		confirm(data) {
			let arr = [];
			if (data.brandList.length == 0) {
				this.where.brand_id = '';
			} else {
				data.brandList.forEach(item => {
					arr.push(item.brand_id);
				});
				this.where.brand_id = arr;
			}
			this.rightBox = data.status;
			this.where.price_on = data.price_on;
			this.where.price_off = data.price_off;
			this.loadend = false;
			this.$set(this.where, 'page', 1);
			this.get_product_list(true);
		},
		// 品牌列表
		getBrandlist() {
			let temp = [];
			getBrandlist({
				cate_id: this.where.mer_cate_id,
				keyword: this.where.keyword
			}).then(res => {
				temp = res.data.list.map(item => {
					return {
						...item,
						check: false
					};
				});
				if (this.where.brand_id.length > 0) {
					this.where.brand_id.forEach((ids, index) => {
						temp.forEach((el, index) => {
							if (el && ids == el.brand_id) {
								el.check = true;
							}
						});
					});
				}
				this.brandList = temp;
				this.rightBox = true;
			});
		},
		// 右侧切换
		bindRight() {
			this.price = 0;
			this.firstKey = 4;
			this.getBrandlist();
		},
		//下拉
		bindDown(item, index) {
			this.firstKey = 0;
			if (index == 0) {
				this.where.order = '';
			} else if (index == 1) {
				this.where.order = 'rate';
			} else if (index == 2) {
				this.where.order = 'is_new';
			}
			this.downKey = index;
			this.downStatus = false;
			this.loadend = false;
			this.$set(this.where, 'page', 1);
			this.get_product_list(true);
		},
		Changswitch: function() {
			let that = this;
			that.is_switch = !that.is_switch;
		},
		//查找产品
		get_product_list: function(isPage) {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			if (isPage === true) that.$set(that, 'productList', []);
			that.loading = true;
			that.loadTitle = '';
			merchantProduct(that.mer_id, that.where)
				.then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.i18n.YiLoadMore : that.i18n.LoadMore;
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
				})
				.catch(err => {
					that.loading = false;
					that.loadTitle = that.i18n.LoadMore;
				});
		},
		//点击事件处理
		set_where: function(e) {
			switch (e) {
				case 1:
					uni.navigateBack();
					break;
				case 2:
					this.firstKey = e;
					if (this.price == 0) {
						this.price = 1;
						this.where.order = 'price_asc';
					} else if (this.price == 1) {
						this.price = 2;
						this.where.order = 'price_desc';
					} else if (this.price == 2) {
						this.price = 0;
						this.where.order = '';
					}
					this.$set(this.where, 'page', 1);
					this.get_product_list(true);
					break;
				case 3:
					this.price = 0;
					this.loadend = false;
					this.$set(this.where, 'order', 'sales');
					this.$set(this.where, 'page', 1);
					this.get_product_list(true);
					this.firstKey = e;
					break;
			}
			this.loadend = false;
			this.$set(this.where, 'page', 1);
			this.get_product_list(true);
		},
		loadmore() {
			if (this.productList.length > 0) {
				this.get_product_list();
			}
		}
	}
};
</script>

<style lang="scss">
.productList {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.search-item {
		display: flex;
		/* #ifdef H5 */
		justify-content: space-between;
		/* #endif */
		align-items: center;
		width: 100%;
		height: 86rpx;
		padding: 0 20rpx;
		z-index: 9;
		.back {
			display: flex;
			align-items: center;
			width: 40rpx;
			height: 60rpx;

			.iconfont {
				color: #fff;
				font-size: 36rpx;
			}
		}
		.input {
			width: 60%;
			/* #ifdef H5 */
			flex: 1;
			/* #endif */
			height: 60rpx;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			input {
				flex: 1;
				height: 100%;
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}
		.placeholder {
			color: #999;
		}
		.iconfont {
			font-size: 35rpx;
			color: #555;
		}
		.iconyduipaibanleixingduicheng,
		.iconpaiban {
			color: #fff;
			width: 62rpx;
			font-size: 40rpx;
			height: 86rpx;
			line-height: 86rpx;
		}
	}
	.nav-wrapper {
		z-index: 10;
		width: 100%;
		background-color: #e93323;

		.tab-bar {
			display: flex;
			align-items: center;

			.tab-item {
				position: relative;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8rpx 0 20rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;

				&::after {
					content: ' ';
					position: absolute;
					left: 50%;
					bottom: 18rpx;
					width: 30rpx;
					height: 3rpx;
					background: transparent;
					transform: translateX(-50%);
				}

				&.on {
					&::after {
						background: #fff;
					}
				}
			}
		}
		.nav {
			height: 86rpx;
			color: #454545;
			font-size: 28rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 28rpx;
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				.iconshaixuan {
					font-size: 30rpx;
					margin-left: 10rpx;
				}
				.spin {
					display: block;
					transform: rotate(180deg);
					font-size: 22rpx;
					margin-left: 10rpx;
				}
				.font-color {
					font-weight: bold;
				}
				image {
					width: 15rpx;
					height: 19rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.min {
		flex: 1;
		min-height: 0rpx;
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-right: 20rpx;
			padding-left: 20rpx;
			background-color: #f5f5f5;
			.item {
				width: 345rpx;
				margin-top: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				.pictrue {
					width: 100%;
					height: 345rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx 20rpx 0 0;
					}
				}
				.text {
					padding: 20rpx 17rpx 26rpx 17rpx;
					font-size: 30rpx;
					color: #222;
					.money {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						font-weight: bold;
						margin-top: 8rpx;
						.num {
							font-size: 34rpx;
						}
						.ticket {
							margin-left: 10rpx;
							padding: 0 5rpx;
							font-weight: initial;
							font-size: 20rpx;
							border: 1px solid #e93323;
							border-radius: 4rpx;
						}
						.ticket-big {
							display: flex;
							align-items: center;
							justify-content: center;
							width: auto;
							padding: 0 10rpx;
							height: 28rpx;
							margin-left: 10rpx;
							background-image: url(~static/images/yh.png);
							background-size: 100% 100%;
							font-size: 20rpx;
							font-weight: normal;
						}
					}
				}
				.score {
					margin-top: 10rpx;
					color: #737373;
					font-size: 20rpx;
				}
				.company {
					display: flex;
					align-items: center;
					color: #737373;
					font-size: 20rpx;
					margin-top: 10rpx;

					.flex {
						display: flex;
						align-items: center;
						margin-left: 10rpx;
						color: #282828;

						.iconfont {
							font-size: 16rpx;
							margin-top: 4rpx;
						}
					}
				}
			}
		}
	}
}
.productList .list.on {
	background-color: #fff;
	border-top: 1px solid #f6f6f6;
}
.productList .list .item.on {
	width: 100%;
	display: flex;
	border-bottom: 1rpx solid #f6f6f6;
	padding: 30rpx 0;
	margin: 0;
}
.productList .list .item .pictrue.on {
	width: 200rpx;
	height: 200rpx;
}
.productList .list .item .pictrue image.on {
	border-radius: 6rpx;
}
.productList .list .item .text.on {
	width: 508rpx;
	padding: 0 0 0 22rpx;
}
.productList .list .item .text .money.on {
	margin-top: 30rpx;
}

.down-wrapper {
	.bg {
		z-index: -9;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.down-box {
		z-index: 8;
		position: fixed;
		left: 0;
		top: rpx;
		width: 100%;
		padding: 0 40rpx 28rpx 74rpx;
		background-color: #f8f8f8;
		border-radius: 0 0 24rpx 24rpx;

		.down-item {
			margin-top: 28rpx;
			font-size: 24rpx;
			color: #454545;

			&.on {
				color: #e93323;
				background-image: url(~static/images/active.png);
				background-repeat: no-repeat;
				background-size: 21rpx 21rpx;
				background-position: center right;
			}
		}
	}
}
</style>
